<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>学生信息</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--表格插件css-->
<link rel="stylesheet" href="js/bootstrap-table/bootstrap-table.min.css">
<!--对话框插件css-->
<link rel="stylesheet" type="text/css" href="js/jquery-confirm/jquery-confirm.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
  
<body>

<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <!-- <header class="card-header">
  	      <div class="card-title">表格插件</div>
  	    </header> -->
  	    <div class="card-body">

			<div class="card-search mb-2-5">
				<form class="search-form" id="query" method="post" action="#!" role="form">
					
				<div class="row">
				<div class="col-md-3">
					<div class="row">
					<label class="col-sm-3 col-form-label"><span class="text-danger">*</span>学生姓名：</label>
					<div class="col-sm-9">
						<input type="text" class="form-control pull-left" name="name" value="" placeholder="请输入学生姓名" />
					</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="row">
					<label class="col-sm-3 col-form-label"><span class="text-danger">*</span>年级：</label>
					<div class="col-sm-9">
						<select name="type" class="form-select">
							<option value="">全部</option>
							<option value="2024">七年级</option>
							<option value="2023">八年级</option>
							<option value="2022">九年级</option>
						</select>
					</div>
					</div>
				</div>
				<div class="col-md-4">
					<button type="submit" class="btn btn-primary me-1">搜索</button>
					<button type="reset" class="btn btn-default">重置</button>
				</div>
				</div>
					
		      </form>
		    </div>

          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary me-1">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-success me-1">
              <span class="mdi mdi-check" aria-hidden="true"></span>启用
            </button>
            <button id="btn_edit" type="button" class="btn btn-warning me-1">
              <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
          </div>
  	      <table id="table"></table>
          
  	    </div>
  	  </div>
  	</div>

  </div>

</div>


<!-- 修改信息的模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h6 class="modal-title" id="exampleModalLabel">新消息</h6>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  <form>
			<div class="mb-3">
			  <label for="recipient-name" class="col-form-label">收件人：</label>
			  <input type="text" class="form-control" id="recipient-name">
			</div>
			<div class="mb-3">
			  <label for="message-text" class="col-form-label">消息：</label>
			  <textarea class="form-control" id="message-text"></textarea>
			</div>
		  </form>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
		  <button type="button" class="btn btn-primary">发送消息</button>
		</div>
	  </div>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<!--表格插件js-->
<script src="js/bootstrap-table/bootstrap-table.js"></script>
<script src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--对话框插件js-->
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"></script>

<script>
	/**
	 * 分页相关的配置
	 **/
	const pagination = {
		// 分页方式：[client] 客户端分页，[server] 服务端分页
		sidePagination: "server",
		// 初始化加载第一页，默认第一页
		pageNumber: 1,
		// 每页的记录行数
		pageSize: 10,
		// 可供选择的每页的行数 - (亲测大于1000存在渲染问题)
		pageList: [5, 10, 25, 50, 100],
		// 在上百页的情况下体验较好 - 能够显示首尾页
		paginationLoop: true,
		// 展示首尾页的最小页数
		paginationPagesBySide: 2
	};
	
	/**
	 * 按钮相关配置
	 **/
	const button = {
		// 按钮的类
		buttonsClass: 'default',
		// 类名前缀
		buttonsPrefix: 'btn'
	}
	
	/**
	 * 图标相关配置
	 **/
	const icon = {
		// 图标前缀
		iconsPrefix: 'mdi',
		// 图标大小
		iconSize: 'mini',
		// 图标的设置
		icons: {
			paginationSwitchDown: 'mdi-door-closed',
			paginationSwitchUp: 'mdi-door-open',
			refresh: 'mdi-refresh',
			toggleOff: 'mdi-toggle-switch-off',
			toggleOn: 'mdi-toggle-switch',
			columns: 'mdi-table-column-remove',
			detailOpen: 'mdi-plus',
			detailClose: 'mdi-minus',
			fullscreen: 'mdi-monitor-screenshot',
			search: 'mdi-table-search',
			clearSearch: 'mdi-trash-can-outline'
		}
	};
	
	/**
	 * 表格相关的配置
	 **/
	const table = {
		classes: 'table table-bordered table-hover table-striped lyear-table',
		// 请求地址
		url: 'http://i.fe80.cn/shubao/student/list',
		// 唯一ID字段
		uniqueId: 'id',
		// 每行的唯一标识字段
		idField: 'id',
		// 是否启用点击选中行
		clickToSelect: true,
		// 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
		// showToggle: true,
		// 请求得到的数据类型
		dataType: 'json',
		// 请求方法
		method: 'post',
		// 工具按钮容器
		toolbar: '#toolbar',
		// 是否分页
		pagination: true,
		// 是否显示所有的列
		showColumns: true,
		// 是否显示刷新按钮
		showRefresh: true,
		// 显示图标
		showButtonIcons: true,
		// 显示文本
		showButtonText: false,
		// 显示全屏
		showFullscreen: true,
		// 开关控制分页
		showPaginationSwitch: true,
		// 总数字段
		totalField: 'total',
		// 当字段为 undefined 显示
		undefinedText: '-',
		// 排序方式
		sortOrder: "asc",
		...icon,
		...pagination,
		...button,
	};
	
	/**
	 * 用于演示的列信息
	 **/
	const columns = [{
		field: 'example',
		checkbox: true,
		// 列的宽度
		width: 5,
		// 宽度单位
		widthUnit: 'rem'
	}, {
		field: 'id',
		title: '编号',
		// 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
		// h表示横向，v标识垂直
		align: 'center',
		// 是否作为排序列
		sortable: true,
		// 当列名称与实际名称不一致时可用
		sortName: 'sortId',
		switchable: false,
		// 列的宽度
		width: 4,
		// 宽度单位
		widthUnit: 'rem'
	}, {
		field: 'grade',
		align: 'center',
		title: '年级',
		titleTooltip: '所在年级'
	}, {
		field: 'infoclass',
		align: 'center',
		title: '班级',
	}, {
		field: 'name',
		align: 'center',
		title: '姓名',
	}, {
		field: 'gender',
		// 是否可视(默认 - true)
		// visible: false,
		align: 'center',
		title: '性别'
	}, {
		field: 'id_card',
		align: 'center',
		title: '身份证号'
	}, {
		field: 'examid',
		align: 'center',
		title: '考号'
	}, {
        field: 'status',
        title: '状态',
        formatter:function(value, row, index){ 
			var value="";
			if (row.status == '0') {
				value = '<span class="badge bg-danger">无学籍</span>';
			} else if(row.status == '1') {
				value = '<span class="badge bg-success">正常</span>';
			} else {
				value = '<span class="badge bg-secondary">未知</span>' ;
			}
			return value;
		}
    }, {
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
            'click .edit-btn': function (event, value, row, index) {
                event.stopPropagation();
                editUser(row);
            },
            'click .del-btn': function (event, value, row, index) {
                event.stopPropagation();
                delUser(row);
            }
        }
    }];
    
    // 自定义操作按钮
    function btnGroup () {
        let html =
            '<a href="#!" class="btn btn-sm btn-default me-1 edit-btn" title="编辑" data-bs-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
            '<a href="#!" class="btn btn-sm btn-default del-btn" title="删除" data-bs-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
        return html;
    }
  
    // 操作方法 - 编辑
    function editUser() {
        var exampleModal = document.getElementById('exampleModal')
		exampleModal.addEventListener('show.bs.modal', function (event) {
			// Button that triggered the modal
			var button = event.relatedTarget
			// Extract info from data-bs-* attributes
			var recipient = button.getAttribute('data-bs-whatever')
			// If necessary, you could initiate an AJAX request here
			// and then do the updating in a callback.
			//
			// Update the modal's content.
			var modalTitle = exampleModal.querySelector('.modal-title')
			var modalBodyInput = exampleModal.querySelector('.modal-body input')

			modalTitle.textContent = '给 ' + recipient + '的新消息'
			modalBodyInput.value = recipient
		});
    }
	editUser();
    // 操作方法 - 删除
    function delUser() {
        $.confirm({
			title: '温馨提示',
			content: '确认要删除该数据吗？',
			icon: 'mdi mdi-comment-question',
			animation: 'scale',
			closeAnimation: 'scale',
			opacity: 0.5,
			buttons: {
				'confirm': {
					text: '确定',
					btnClass: 'btn-blue',
					action: function() {
						$.alert('<strong>删除</strong>成功！');
					}
				},
				'取消': function() {}
			}
		});
    }
	
	$('table').bootstrapTable({
		...table,
		// 自定义的查询参数
		queryParams: function (params) {
			return {
				// 每页数据量
				limit: params.limit,
				// sql语句起始索引
				offset: params.offset,
				page: (params.offset / params.limit) + 1,
				// 排序的列名
				sort: params.sort,
				// 排序方式 'asc' 'desc'
				sortOrder: params.order,
				keywords: $('input[name=name]').val(),
				grade: $('select[name=type]').val()
			};
		},
		columns,
        onLoadSuccess: function(data){
            $("[data-bs-toggle='tooltip']").tooltip();
        }
	});

	document.getElementById('query').addEventListener('submit', function(event) {
		event.preventDefault(); // 阻止默认的提交行为
		console.log('Form submission prevented.');
		// 你可以在这里添加自己的逻辑处理
		// $('table').bootstrapTable('gotoPage', 1);
		$('table').bootstrapTable('refresh'); //刷新页面
	});
</script>
</body>
</html>
